<template>
  <div>
    <div id="four">
      <div id="find">
        <p>查询</p>
      </div>
      <div>
        <div id="time"
             class="clear">
          <div>
            <span class="demonstration"></span>
            <el-date-picker v-model="date1"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div id="mid">至</div>
          <div>
            <span class="demonstration"></span>
            <el-date-picker v-model="date2"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <el-row id="every">
            <el-button type="primary"
                       @click="onSearch"
                       round
                       style="width:80px">查询</el-button>
          </el-row>
        </div>
      </div>
    </div>
    <div id="shop">
      <div class="clear">
        <p id="cl">明细数据</p>
        <el-button type="info"
                   round
                   style="width:80px"
                   id="ton"
                   @click="onExport">导出</el-button>
      </div>
    </div>
    <div class="clear"
         id="btn">
      <div>
        <p>销售额</p>
        <el-button size="small">￥{{sell}}</el-button>
      </div>
      <div>
        <p>退单额</p>
        <el-button size="small">￥{{back}}</el-button>
      </div>
      <div>
        <p>收入</p>
        <el-button size="small">￥{{earn}}</el-button>
      </div>
      <div>
        <p>现金支付</p>
        <el-button size="small">￥{{pay1}}</el-button>
      </div>
      <div>
        <p>小程序支付</p>
        <el-button size="small">￥{{pay4}}</el-button>
      </div>
      <div>
        <p>线下支付</p>
        <el-button size="small">￥{{pay2}}</el-button>
      </div>
      <div>
        <p>积分支付</p>
        <el-button size="small">￥{{pay5}}</el-button>
      </div>
      <div>
        <p>扫码支付</p>
        <el-button size="small">￥{{pay3}}</el-button>
      </div>
      <div>
        <p>客单量</p>
        <el-button size="small">￥{{sum}}</el-button>
      </div>
    </div>
    <div>
      <template>
        <el-table :data="tableData"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{'text-align':'center',background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}"
                  :cell-style="{'text-align':'center',border:'1px solid #DCDCDC'}"
                  tooltip-effect="dark">
          <el-table-column prop="order_num"
                           label="序号"
                           width="160">
          </el-table-column>
          <el-table-column prop="time"
                           label="日期"
                           width="200">
          </el-table-column>
          <el-table-column prop="income"
                           label="收入"
                           width="100">
          </el-table-column>
          <el-table-column prop="sale"
                           label="销售额"
                           width="160">
          </el-table-column>
          <el-table-column prop="reject"
                           label="退单额"
                           width="160">
          </el-table-column>
          <el-table-column prop="order_amount"
                           label="客单量">
          </el-table-column>
          <el-table-column prop="menu_price"
                           label="客单价"
                           width="160">
          </el-table-column>

          <el-table-column prop="user_name"
                           label="收银员"
                           width="160">
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="count"
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 15, 20]"
                     :total="totalData.length">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      date1: '',
      date2: '',
      page: 1,
      count: 5,
      totalData: [],
      currentPage: 1,
      earn: 0,
      sell: 0,
      back: 0,
      sum: 0,
      pay1: 0,
      pay2: 0,
      pay3: 0,
      pay4: 0,
      pay5: 0,
      time: '',
      datalist: []
    }
  },
  methods: {
    onExport () {
      this.$alert('是否确认导出明细？', {
        title: '导出明细',
        callback: (action) => {

          this.datalist.push([
            "序号",
            "日期",
            "收入",
            "销售额",
            "退单额",
            "客单量",
            "客单价",
            "收银员"
          ]);
          this.totalData.forEach((item) => {
            this.datalist.push([
              item.order_num,
              item.order_time.substring(0, 10),
              item.order_amount * (item.menu_price - item.menu_cost),
              item.order_amount * item.menu_price,
              item.order_back_amount * item.menu_price,
              item.order_amount,
              item.menu_price,
              item.user_name,
            ])
          })
          this.$downloadXlsx(this.datalist, "收入信息明细数据.xlsx");
          if (action == "confirm") {
            this.$message({
              type: 'success',
              message: '导出成功!',
              duration: 2000,
            });
          } else {
            this.$message({
              type: 'warning',
              message: '取消导出!',
              duration: 2000,
            })
          }
        }
      });
    },
    onSearch () {
      this.$axios({
        url: "/revenuereport/getreport",
        method: 'post',
        data: {
          date1: this.date1,
          date2: this.date2
        }
      }).then((res) => {
        this.totalData = res.data.data
        this.earn = 0,
          this.sell = 0,
          this.back = 0,
          this.sum = 0,
          this.pay1 = 0,
          this.pay2 = 0,
          this.pay3 = 0,
          this.pay4 = 0,
          this.pay5 = 0,
          this.totalData.forEach((v, i) => {
            this.time = this.totalData[i].order_time
            v.time = this.time.substring(0, 10)
            v.income = v.order_amount * (v.menu_price - v.menu_cost);
            this.earn += this.totalData[i].income
            v.sale = v.order_amount * v.menu_price
            this.sell += this.totalData[i].sale
            v.reject = v.order_back_amount * v.menu_price
            this.back += this.totalData[i].reject
            this.sum += this.totalData[i].order_amount
            if (this.totalData[i].pay_way == "现金支付") {
              this.pay1 += v.order_amount * v.menu_price
            } else if (this.totalData[i].pay_way == "线下支付") {
              this.pay2 += v.order_amount * v.menu_price
            } else if (this.totalData[i].pay_way == "扫码支付") {
              this.pay3 += v.order_amount * v.menu_price
            } else if (this.totalData[i].pay_way == "小程序支付") {
              this.pay4 += v.order_amount * v.menu_price
            } else if (this.totalData[i].pay_way == "积分支付") {
              this.pay5 += v.order_amount * v.menu_price
            }
            return v
          })

        if (this.date1 != '' && this.date2 != '') {
          if (res.data.code == 200) {
            this.$message({
              message: '查询成功！',
              type: 'success',
              duration: 2000,
            })
          }
        } else {
          this.$message({
            message: '查询失败！',
            type: 'warning',
            duration: 2000,
          })
        }
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.count = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
    },
  },
  mounted: function () {
    this.$axios({
      url: "/revenuereport/getrepeat",
      method: 'post',

    }).then((res) => {
      this.totalData = res.data.data
      this.totalData.forEach((v, i) => {

        this.time = this.totalData[i].order_time
        v.time = this.time.substring(0, 10)
        v.income = v.order_amount * (v.menu_price - v.menu_cost);
        this.earn += this.totalData[i].income
        v.sale = v.order_amount * v.menu_price
        this.sell += this.totalData[i].sale
        v.reject = v.order_back_amount * v.menu_price
        this.back += this.totalData[i].reject
        this.sum += this.totalData[i].order_amount
        if (this.totalData[i].pay_way == "现金支付") {
          this.pay1 += v.order_amount * v.menu_price
        } else if (this.totalData[i].pay_way == "线下支付") {
          this.pay2 += v.order_amount * v.menu_price
        } else if (this.totalData[i].pay_way == "扫码支付") {
          this.pay3 += v.order_amount * v.menu_price
        } else if (this.totalData[i].pay_way == "小程序支付") {
          this.pay4 += v.order_amount * v.menu_price
        } else if (this.totalData[i].pay_way == "积分支付") {
          this.pay5 += v.order_amount * v.menu_price
        }
        return v
      })
    })
  },
  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count)
    },
  }
}
</script>

<style scoped>
#find {
  background-color: rgb(242, 242, 242);
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgb(220, 220, 220);
}
#find > p {
  margin-left: 30px;
}
.el-input {
  width: 200px;
}
#mid {
  margin: 0 30px;
  padding: 10px 20px;
}
#every {
  float: right;
  margin-right: 100px;
}
#every > .el-button {
  margin-left: 350px;
  padding: 10px 20px;
}
#four {
  border: 1px solid rgb(220, 220, 220);
}
#time {
  padding: 20px 0;
  margin-left: 30px;
}
#shop {
  margin: 20px 0;
}
#shop p {
  margin-left: 30px;
}
#shop > div:nth-child(1) {
  background-color: rgb(242, 242, 242);
  border-bottom: 1px solid rgb(220, 220, 220);
  height: 60px;
  line-height: 60px;
}
#btn > div {
  float: left;
  margin-left: 50px;
  text-align: center;
}
#btn p {
  margin-bottom: 15px;
}
#btn {
  margin-bottom: 20px;
}
#time > div {
  float: left;
}
.block {
  width: 500px;
  margin: 20px auto;
}
#ton {
  float: right;
  margin-top: 12px;
  height: 36px;
  margin-right: 60px;
}
#cl {
  float: left;
}
</style>